blog

Home / DeveloperSection / Blogs / Navigation drawer in android material design

Navigation drawer in android material design

Manoj Pandey2566 11-Feb-2016

Navigation drawer is a hidden panel that display after swipe finger left to right. It also show on touch action bar icon. Generally it shows from left to right but developers can show according to his need.

Here I am creating a sample to show navigation tab in android studio.

1.    First you have need to support design in your project. So add following in build.gradle

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:22.2.1'

    compile 'com.android.support:design:22.2.0'

}

2.     Create menu and add following item

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item android:title="Inbox"

        android:id="@+id/nav_item_inbox"

        android:icon="@drawable/ic_launcher"/> 

    <item android:title="Sent"

        android:id="@+id/nav_item_sent"

        android:icon="@drawable/ic_launcher"/> 

    <item android:title="Drafts"

        android:id="@+id/nav_item_draft"

        android:icon="@drawable/ic_launcher"/>

    <item android:title="Others">

        <menu>

            <item

                android:title="Spam"

                android:icon="@drawable/ic_launcher"/>

            <item

                android:title="Bin"

                android:icon="@drawable/ic_launcher"/>

        </menu>

    </item> 

    <group android:id="@+id/group_settings_id"> 

        <item android:title="Settings"

            android:icon="@drawable/ic_launcher"/>

        <item android:title="Help"

            android:icon="@drawable/ic_launcher"/>

    </group>

</menu>

3.     Add controls in activity_main.xml file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    android:orientation="vertical">

 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#006699"

        android:id="@+id/toolbar"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        app:title="Navigation View" />

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:layout_height="match_parent"

        android:layout_width="match_parent"

        android:id="@+id/drawerLayout">

        <FrameLayout

            android:orientation="vertical"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:id="@+id/containerView"></FrameLayout>

  <android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"

            xmlns:app="http://schemas.android.com/apk/res-auto"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_gravity="start"

            android:id="@+id/shitstuff"

            app:itemTextColor="#000000"

            app:menu="@menu/drawermenu"

            android:layout_marginTop="-24dp" />

 

    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

4.   Now add below code in MainActivity.class

public class MainActivity extends AppCompatActivity {

    NavigationView mNavigationView;

    DrawerLayout mDrawerLayout;

    android.support.v4.app.FragmentTransaction mFragmentTransaction;

    FragmentManager mFragmentManager;

    android.support.v7.widget.Toolbar toolbar;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        mNavigationView = (NavigationView) findViewById(R.id.shitstuff);

        getSupportActionBar().hide();

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        toolbar = (Toolbar) findViewById(R.id.toolbar);

mNavigationView.setNavigationItemSelectedListener(new NavigationView. OnNavigationItemSelectedListener() {

            @Override

            public boolean onNavigationItemSelected(MenuItem menuItem) {

                mDrawerLayout.closeDrawers();

              // select navigation item

                if (menuItem.getItemId() == R.id.nav_item_sent) {

 

                } else if (menuItem.getItemId() == R.id.nav_item_inbox) {

 

                }

 

                return false;

            }

 

        });

        android.support.v7.app.ActionBarDrawerToggle mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.app_name,

                R.string.app_name);

 

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerToggle.syncState();

    }

 

}

 

Now run your application. You can see navigation drawer on click toggle button or swipe left to right.

Navigation drawer in android material design


Leave Comment

Comments

Liked By